<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="agencyCode" label="城市服务商">
          <serveSelect @selectClick="selectClick" :value="model.agencyCode"></serveSelect>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="distanceFree" label="多少公里内免费(通用)">
          <a-input-number v-model="model.distanceFree" />
          <span>km</span>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startDistance" label="起步价距离(通用)">
          <a-input-number v-model="model.startDistance" />
          <span>km</span>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div class="form-divider">
            <span class="form-divider-text">------------------------白天配置参数------------------------</span>
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startPrice" label="起步价(白天)">
          <a-input-number v-model="model.startPrice" />
          <span>元</span>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="distancePrice" label="每公里费用(白天)">
          <a-input-number v-model="model.distancePrice" />
          <span>元</span>
        </a-form-model-item>

        <!--        <a-row :gutter='24'>-->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime" label="开始时间(白天)">
          <a-date-picker showTime valueFormat="HH:mm:ss" v-model="model.startTime" />
        </a-form-model-item>
        <!--        </a-row>-->
        <!--        <a-row :gutter='24'>-->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime" label="结束时间(白天)">
          <a-date-picker showTime valueFormat="HH:mm:ss" v-model="model.endTime" />
        </a-form-model-item>
        <!--        </a-row>-->
        <!--晚上-->

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div class="form-divider">
            <span class="form-divider-text">------------------------夜间配置参数------------------------</span>
          </div>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eveningStartPrice" label="起步价(夜间)">
          <a-input-number v-model="model.eveningStartPrice" />
          <span>元</span>
        </a-form-model-item>

        <!--        <a-row :gutter='20'>-->

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="eveningDistancePrice"
          label="每公里费用(夜间)"
        >
          <a-input-number v-model="model.eveningDistancePrice" />
          <span>元</span>
        </a-form-model-item>

        <!--        </a-row>-->
        <!--        <a-row :gutter='24'>-->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eveningStartTime" label="开始时间(夜间)">
          <a-date-picker showTime valueFormat="HH:mm:ss" v-model="model.eveningStartTime" />
        </a-form-model-item>
        <!--        </a-row>-->
        <!--        <a-row :gutter='20'>-->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eveningEndTime" label="结束时间(夜间)">
          <a-date-picker showTime valueFormat="HH:mm:ss" v-model="model.eveningEndTime" />
        </a-form-model-item>
        <!--        </a-row>-->

        <!--        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="状态（1启用，0不启用）">-->
        <!--          <a-input-number v-model="model.status"/>-->
        <!--        </a-form-model-item>-->
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import moment from 'moment'
import serveSelect from '@/components/serveSelecty.vue'
import serveSelectyskill from '@comp/serveSelectyskill.vue'

export default {
  name: 'XhdjCarPriceModal',
  components: {
    serveSelect
  },
  data () {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/xhdjCarPrice/add',
        edit: '/xhdjCarPrice/edit'
      }
    }
  },
  created () {},
  methods: {
    add () {
      //初始化默认值
      this.edit({})
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    selectClick (value) {
      console.log(12346464, value)
      this.model.agencyCode = value
      console.log('数据源', this.model)
      this.text = value
    },
    handleOk () {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.form-divider {
  margin: 16px 0;
}

.form-divider-text {
  display: inline-block;
  padding: 0 16px;
  color: #f5222d;
  border-bottom: 2px solid #e8e8e8;
  line-height: 1px;
  text-align: left;
}
</style>
